<template>
	<div class="search-bar goods">
		<el-form
			ref="form"
			:model="form"
			label-width="60px"
			label-suffix="："
		>
			<el-form-item label="类别">
				<el-menu
					:default-active="form.categoryId"
					class="el-menu-demo"
					mode="horizontal"
					@select="changeCategoryId">
					<template v-for="item in categoriesWithQuery">
						<el-submenu
							v-if="item.children"
							:index="item.id"
							:class="{'is-active': item.isActive}"
						>
							<template slot="title">
								<div @click="changeCategoryId(item.id)">
									{{item.name}}
								</div>
							</template>
							<el-menu-item
								v-for="child in item.children"
								:key="child.index"
								:index="child.id">{{child.name}}
							</el-menu-item>
						</el-submenu>
						<el-menu-item
							v-else
							:index="item.id">{{item.name}}
						</el-menu-item>
					</template>
				</el-menu>
			</el-form-item>
			<el-form-item label="价格">
				<div class="goods__price">
					<el-input
						v-model="form.minPrice"
						size="small"
						placeholder=""></el-input>
					<span class="price-split">至</span>
					<el-input
						v-model="form.maxPrice"
						size="small"
						placeholder=""></el-input>
					<el-button
						size="small"
						type="primary"
						@click="changePrice"
					>
						搜索
					</el-button>
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
  /**
   *
   *
   *
   */
  import {mapState, mapGetters} from 'vuex'

  export default {
    name: "c-goods-category",
    data() {
      return {
        form: {
          minPrice: '',
          maxPrice: '',
          categoryId: ''
        }
      }
    },
    computed: {
      ...mapState([
        'categories'
      ]),
      ...mapGetters([
        'isAdmin',
        'cascaderCategories'
      ]),
      categoriesWithQuery() {
        let {minPrice, maxPrice, categoryId} = this.form
        let path = '#/index'
        if (this.isAdmin) {
          path = '#/goods/manage'
        }
        let getQuery = item => {
          let query = '?categoryId=' + item.id
          if (minPrice) {
            query += '&minPrice=' + minPrice
          }
          if (maxPrice) {
            query += '&maxPrice=' + maxPrice
          }
          return query
        }
        return this.cascaderCategories.map(item => {
          if (Array.isArray(item.children)) {
            item.children.forEach(inner => {
              inner.id = '' + inner.id
              inner.index = path + getQuery(inner)
            })
          }
          item.index = path + getQuery(item)
          item.id = '' + item.id
          item.isActive = categoryId === item.id
          return item
        })
      }
    },
    watch: {
      $route: {
        deep: true,
        immediate: true,
        handler({query}) {
          this.form.minPrice = query.minPrice || ''
          this.form.maxPrice = query.maxPrice || ''
          this.form.categoryId = query.categoryId !== undefined ? query.categoryId : this.isAdmin ? '' : 0
        }
      }
    },
    mounted() {
      this.$store.dispatch('getCategories')
    },
    methods: {
      changeCategoryId(categoryId) {
        this.changeRoute({
          categoryId: categoryId
        })
      },
      changePrice() {
        let {minPrice, maxPrice} = this.form
        this.changeRoute({
          minPrice: minPrice,
          maxPrice: maxPrice
        })
      },
      changeRoute(query) {
        let path = '/index'
        if (this.isAdmin) {
          path = '/goods/manage'
        }
        this.$router.push({
          path: path,
          query: {
            ...this.$route.query,
            ...query
          }
        })
      }
    }
  }
</script>

<style lang='less'>
	.search-bar {
		.el-menu-demo {
			border-bottom: none !important;

			.el-menu-item, .el-submenu__title {
				height: 30px !important;
				line-height: 30px !important;
				border-bottom: none !important;
				font-size: 14px !important;
				color: #000 !important;

			}
		}
		.el-submenu__title{
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.el-menu--horizontal {
		.el-submenu.is-opened, .el-submenu.is-active, .el-menu-item.is-active {
			background-color: #409EFF !important;
			color: #fff !important;
			border-radius: 2px;

			.el-submenu__title {
				color: #fff !important;
				background-color: #409EFF !important;
			}
			.el-submenu__icon-arrow{
				color: #fff !important;
			}
		}
	}

</style>
